<!DOCTYPE html>
<html>

<head>
    <title>学生信息管理</title>

    <!-- 引入vue框架 -->
    <script src="../../lib/js/vue.js"></script>
    <!-- 引入axios库 -->
    <script src="../../lib/js/axios.js"></script>
    <!-- 引入config -->
    <script src="../../lib/js/config.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/flat-blue.css">

    <script src="../../lib/js/jquery.min.js"></script>





    <style>
        /* 模态框样式 */
        .modal {
            z-index: 1050;
            display: none;
            /* 默认隐藏 */
            position: fixed;
            /* 固定位置 */
            z-index: 1;
            /* 确保在最上层 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            /* 半透明背景 */
        }

        .modal-backdrop {
            z-index: 1040;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            /* 垂直居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            padding: 20px;
            border-radius: 8px;
            /* 圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        /* 表单字段样式 */
        .modal-content form {
            display: flex;
            flex-direction: column;
        }

        .modal-content form label {
            margin-top: 10px;
        }

        .modal-content form input {
            margin-top: 5px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            /* 输入框圆角 */
            transition: border-color 0.3s;
        }

        .modal-content form input:focus {
            border-color: #66afe9;
            outline: none;
        }

        .modal-content form button {
            margin-top: 20px;
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            /* 按钮圆角 */
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .modal-content form button:hover {
            background-color: #0056b3;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body class="flat-blue">
    <div class="app-container">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li>学生信息管理</li>
                            <li class="active">学生信息管理</li>
                        </ol>
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">0</span>
                                </li>
                                <li class="message">
                                    No new notification
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown danger">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
                            <ul class="dropdown-menu danger  animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">4</span>
                                </li>
                                <li>
                                    <ul class="list-group notifications">
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge">1</span> <i
                                                    class="fa fa-exclamation-circle icon"></i> new registration
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge success">1</span> <i class="fa fa-check icon"></i>
                                                new orders
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge danger">2</span> <i class="fa fa-comments icon"></i>
                                                customers messages
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item message">
                                                view all
                                            </li>
                                        </a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown profile">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false">Emily Hart <span class="caret"></span></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="profile-img">
                                    <img src="../../img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                                </li>
                                <li>
                                    <div class="profile-info">
                                        <h4 class="username">Emily Hart</h4>
                                        <p>emily_hart@email.com</p>
                                        <div class="btn-group margin-bottom-2x" role="group">
                                            <button type="button" class="btn btn-default"><i class="fa fa-user"></i>
                                                Profile</button>
                                            <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i>
                                                Logout</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                <div class="icon fa fa-paper-plane"></div>
                                <div class="title">大学生信息管理系统</div>
                            </a>
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                <i class="fa fa-times icon"></i>
                            </button>
                        </div>
                        <ul class="nav navbar-nav">
                            <li>
                                <a href="../index.html">
                                    <span class="icon fa fa-tachometer"></span><span class="title">首页</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-element">
                                    <span class="icon fa fa-desktop"></span><span class="title">用户管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-element" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="../personalInformation.html">个人信息管理</a></li>
                                            <li><a href="../viewCourse.html">查看课程</a></li>
                            </li>
                        </ul>
                    </div>
            </div>
            </li>
            <li class="acitve panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-table">
                    <span class="icon fa fa-table"></span><span class="title">学生管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-table" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../table/studentInformationManage.html">学生信息管理</a>
                            </li>
                            <li><a href="../table//selectCourse.html">学生选课管理</a>
                            </li>
                            <li><a href="../table/deleteCourse.html">学生退课管理</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-form">
                    <span class="icon fa fa-file-text-o"></span><span class="title">班级管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-form" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../form/class.html">班级管理</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#component-example">
                    <span class="icon fa fa-cubes"></span><span class="title">课程管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="component-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../components/course.html">课程管理</a>
                            </li>
                            <!--<li><a href="../components/chartjs.html">Chart.JS</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-example">
                    <span class="icon fa fa-slack"></span><span class="title">成绩管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../score.html">学生查看个人成绩</a>
                            </li>
                            <li><a href="../scoreManagement.html">老师添加成绩、修改成绩</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-icon">
                    <span class="icon fa fa-archive"></span><span class="title">系统管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-icon" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../log.html">日志管理</a>
                            </li>
                            <!-- <li><a href="../icons/font-awesome.html">Font Awesomes</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="../license.html">
                    <span class="icon fa fa-thumbs-o-up"></span><span class="title">License</span>
                </a>
            </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
        </nav>
    </div>
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">

            <div class="row">


                <div class="col-md-4">
                    <!-- 首页 -->

                    <a href="../index.html">
                        <img src="../../home.png" alt="">
                    </a>

                    <!-- 设置图标大小 -->
                    <style>
                        img {
                            width: 30px;
                            height: 30px;
                        }
                    </style>
                </div>



                <!-- 录入学生信息 -->
                <div class="col-md-4">
                    <a href="#" id="openModal">
                        <img src="../../addClass.png" alt="">录入学生信息
                    </a>
                </div>

                <!-- 模态框 -->
                <!-- <div id="myModal" class="modal"> 
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="form-group">
                                        <label for="recipient-name" class="col-form-label">id:</label>
                                        <input type="text" class="form-control" id="recipient-name">
                                    </div>
                                    <div class="form-group">
                                        <label for="message-text" class="col-form-label">姓名:</label>
                                        <textarea class="form-control" id="message-text"></textarea>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary">录入</button>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                -->








                <!--录入学生信息模态框  -->
                <div id="openAddModal" class="modal">
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>录入学生信息</h2>
                        <form id="studentForm">
                            <label for="studentId">学号:</label>
                            <input type="text" id="studentId" name="studentId" required>

                            <label for="studentName">姓名:</label>
                            <input type="text" id="studentName" name="studentName" required>

                            <label for="studentSex">性别:</label>
                            <input type="text" id="studentSex" name="studentSex" required>

                            <label for="studentAge">年龄:</label>
                            <input type="number" id="studentAge" name="studentAge" required>

                            <label for="studentDate">出生日期:</label>
                            <input type="date" id="studentDate" name="studentDate" required>

                            <label for="studentClass">班级:</label>
                            <input type="text" id="studentClass" name="studentClass" required>

                            <label for="studentPhone">电话:</label>
                            <input type="text" id="studentPhone" name="studentPhone" required>

                            <label for="userId">用户ID:</label>
                            <input type="number" id="userId" name="userId" required>

                            <button type="submit">确定</button>
                            <button type="button" onclick="closeModel1()">取消</button>
                        </form>
                    </div>
                </div>



                <!-- 修改学生信息模态框 -->
                <div id="openUpdateModal" class="modal">
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>修改学生信息</h2>
                        <form id="studentForm_update">
                            <label for="updateStudentId">学号:</label>
                            <input type="text" id="updateStudentId" name="updateStudentId" required readonly
                                v-model="student.studentId">

                            <label for="updateStudentName">姓名:</label>
                            <input type="text" id="updateStudentName" name="updateStudentName" required
                                v-model="student.studentName">

                            <label for="updateStudentSex">性别:</label>
                            <input type="text" id="updateStudentSex" name="updateStudentSex" required
                                v-model="student.studentSex">

                            <label for="updateStudentAge">年龄:</label>
                            <input type="number" id="updateStudentAge" name="updateStudentAge" required
                                v-model="student.studentAge">

                            <label for="updateStudentDate">出生日期:</label>
                            <input type="date" id="updateStudentDate" name="updateStudentDate" required
                                v-model="student.studentDate">

                            <label for="updateStudentClass">班级:</label>
                            <input type="text" id="updateStudentClass" name="updateStudentClass" required
                                v-model="student.studentClass">

                            <label for="updateStudentPhone">电话:</label>
                            <input type="text" id="updateStudentPhone" name="updateStudentPhone" required
                                v-model="student.studentPhone">

                            <label for="updateUserId">用户ID:</label>
                            <input type="number" id="updateUserId" name="updateUserId" required readonly
                                v-model="student.userId">

                            <button type="submit">确定</button>
                            <button type="button" onclick="closeModel2()">取消</button>
                        </form>
                    </div>
                </div>




                <!-- 分班模态框 -->
                <!-- <div class="modal fade" id="divideModal" tabindex="-1" role="dialog" aria-labelledby="classModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="classModalLabel">选择班级</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="classSelect">选择班级</label>
                                    <select class="form-control" id="classSelect">
                                        <option value="1">班级1</option>
                                        <option value="2">班级2</option>
                                        <option value="3">班级3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" id="assignClassBtn">确定</button>
                            </div>
                        </div>
                    </div>
                </div> -->


            </div>
            <div id="studentInformationManagement">   
            <div class="col-xs-12">
                <div class="card">

                    <div class="card-header">
                        <div class="card-title">
                            <div class="title">学生列表</div>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- 点击选择按钮，出现复选框，勾选班级，进行操作 -->
                        <button id="showCheckboxesButton" class="btn btn-primary">选择</button>
                        <button id="selectAllButton" class="btn btn-primary" style="display: none;">全选</button>
                        <button id="deleteSelectedButton" class="btn btn-primary" style="display: none;">删除</button>
                        <button id="DOMContentLoaded" class="btn btn-primary" style="display: none;">修改</button>
                        <button id="divideClass" class="btn btn-primary" style="display: none;">分班</button>


                        <div id="queryStudentInformation">
                            <!-- 分页查询表单 -->
                            <!--     <form @submit.prevent="queryStudents">
                                <input type="number" v-model="currentPage" placeholder="页码" value="currentPage">
                                <button type="submit">查询</button>
                            </form> -->

                            <!-- 学生列表 -->

                            <!-- 模糊查询-->
                            <div class="col-md-4">
                                <form class="form-inline" @submit.prevent="queryStudentByNameOrId">
                                    <div class="form-group mx-sm-3 mb-2">
                                        <label for="inputSearch" class="sr-only">输入查询信息</label>
                                        <input type="text" class="form-control" name="keyword" id="inputSearch"
                                            placeholder="输入查询信息" v-model="keyword">
                                    </div>
                                    <button type="button" class="btn btn-primary mb-2"
                                        @click="queryStudentByNameOrId">查询</button>
                                    <!-- 为上面按钮设置颜色 -->
                                </form>
                            </div>

                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>|</th>
                                        <th scope="col">#</th>
                                        <th scope="col">学号</th>
                                        <th scope="col">姓名</th>
                                        <th scope="col">性别</th>
                                        <th scope="col">年龄</th>
                                        <th scope="col">出生日期</th>
                                        <th scope="col">班级</th>
                                        <th scope="col">电话</th>
                                        <th scope="col">用户ID</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(student, index) in studentList" :key="student.studentId">
                                        <td><input type="checkbox" class="row-checkbox" :id="'checkbox-1' + (index + 1)" style="display: none;"></td>
                                        <th scope="row">{{ index + 1 }}</th>
                                        <td>{{ student.studentId }}</td>
                                        <td>{{ student.studentName }}</td>
                                        <td>{{ student.studentSex }}</td>
                                        <td>{{ student.studentAge }}</td>
                                        <td>{{ student.studentDate }}</td>
                                        <td>{{ student.studentClass}}</td>
                                        <td>{{ student.studentPhone }}</td>
                                        <td>{{ student.userId}}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <!--分页  -->
                            <div class="paging">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item" :class="{ disabled: currentPage === 1 }">
                                            <a class="page-link" href="#" @click.prevent="getStudentList(currentPage - 1)">上一页</a>
                                        </li>
                                        <li class="page-item" v-for="page in pageList" :key="page" :class="{ active: currentPage === page }">
                                            <a class="page-link" href="#" @click.prevent="getStudentList(page)">{{ page }}</a>
                                        </li>
                                        <li class="page-item" :class="{ disabled: currentPage === pageList.length }">
                                            <a class="page-link" href="#" @click.prevent="getStudentList(currentPage + 1)">下一页</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>



                    </div>
                </div>
            </div>

        </div>

            <div class="col-xs-12">
                <div class="card">

                    <div class="card-header">
                        <div class="card-title">
                            <div class="title">优秀学生风采</div>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- 优秀班级风采 -->

                        <div class="row">
                            <!-- 班级1 -->
                            <div class="card-deck">
                                <div class="col-md-4">
                                    <div class="card">
                                        <img src="../../1.jpg" class="card-img-top" alt="..."
                                            style="width: 400px; height: 300px;">
                                        <div class="card-body">
                                            <h5 class="card-title">Card title</h5>
                                            <p class="card-text">This is a wider card with supporting text below as a
                                                natural lead-in to additional content. This content is a little bit
                                                longer.</p>
                                        </div>
                                        <div class="card-footer">
                                            <small class="text-muted">Last updated 3 mins ago</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- 班级2 -->
                                <div class="col-md-4">
                                    <div class="card">
                                        <img src="../../2.jpg" class="card-img-top" alt="..."
                                            style="width: 400px; height: 300px;">
                                        <div class="card-body">
                                            <h5 class="card-title">Card title</h5>
                                            <p class="card-text">This is a wider card with supporting text below as a
                                                natural lead-in to additional content. This content is a little bit
                                                longer.</p>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <small class="text-muted">Last updated 3 mins ago</small>
                                    </div>
                                </div>
                            </div>
                            <!-- 班级3 -->
                            <div class="col-md-4">
                                <div class="card">
                                    <img src="../../3.jpg" class="card-img-top" alt="..."
                                        style="width: 400px; height: 300px;">
                                    <div class=" card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a wider card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                    </div>
                                    <div class="card-footer">
                                        <small class="text-muted">Last updated 3 mins ago</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <script>




            Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

            var studentInformation = new Vue({
                el: '#studentInformationManagement',
                data: {
                    studentList: [], // 初始化为空数组
                    currentPage: 1, // 初始化为1
                    pageList: [], // 分页列表
                    keyword: '',
                    addStudentsToClassDTO:{
                        studentsId:[],
                        studentClass:''
                    },
                    
                    student: {
                        studentId: '',
                        studentName: '',
                        studentSex: '',
                        studentDate: '',
                        studentAge: '',
                        studentClass: '',
                        studentPhone: '',
                        userId: '',
                    }
                },
                mounted() {
                    this.getStudentList(this.currentPage);
                },
                methods: {
                    // 分页显示学生信息
                    getStudentList(page) {
                        // this.currentPage = page;
                        axios.get('/student/queryStudentByPage/' + page).then(response => {
                            this.studentList = response.data.data['studentList'];
                            this.pageList = response.data.data['pageList'];
                            this.currentPage = page;

                        }).catch(error => {
                            console.error('获取学生列表失败:', error);
                        });
                    },
                    // 添加学生信息
                    addStudent(Student) {
                        axios.post('/student/addStudent', Student).then(response => {
                            console.log("添加学生信息", Student);
                            this.getStudentList(this.currentPage);
                        }).catch(error => {
                            console.error('添加学生失败:', error);
                        });
                    },
                    // 修改学生信息
                    updateStudent(Student) {
                        axios.post('/student/updateStudent', Student).then(response => {
                            this.getStudentList(this.currentPage);
                            console.log("修改学生信息", Student);
                        }).catch(error => {
                            console.error('修改学生失败:', error);
                        });
                    },
                    //删除学生信息
                    deleteStudent(studentId) {
                        axios.get('/student/deleteStudent/' + studentId).then(response => {

                            if (response.data.data == true) {
                                this.getStudentList(this.currentPage);
                                console.log("删除学生信息", studentId);
                            } else {
                                console.error("删除失败:");
                            }
                        })
                    },
                    // 模糊查询
                    queryStudentByNameOrId() {
                        axios.get('/student/queryStudentByNameOrId/' + this.keyword).then(response => {
                            console.log("查询成功:", response.data);
                            this.studentList = response.data.data; // 确保更新的是 studentList
                        }).catch(error => {
                            console.error('查询学生失败:', error);
                        });
                    },
                    /* // 分班方法
                    addStudentToClass(studentsId, studentClass) {
                        axios.post('/student/addStudentToClass', { studentsId: studentsId, studentClass: studentClass })
                        .then(response => {
                            console.log("分班成功:",  response.data);
                            this.getStudentList(this.currentPage);// 更新学生列表
                        })
                        .catch(error => {
                            console.error('分班失败:', error);
                        });
                    } */
                 
                    // 分班方法
                    addStudentToClass(addStudentsToClassDTO) {
                        axios.post('/student/addStudentToClass', addStudentsToClassDTO).then(response => {
                            this.getStudentList(this.currentPage);
                            console.log("分班成功",response.data);
                        }).catch(error => {
                            console.error('分班失败:', error);
                        });
                       
                    }
                }
            });



            // 显示或隐藏复选框
            document.getElementById('showCheckboxesButton').addEventListener('click', function () {
                var checkboxes = document.querySelectorAll('.row-checkbox');
                var selectAllButton = document.getElementById('selectAllButton');
                var deleteSelectedButton = document.getElementById('deleteSelectedButton');

                checkboxes.forEach(function (checkbox) {
                    if (checkbox.style.display === 'none') {
                        checkbox.style.display = 'block';
                    } else {
                        checkbox.style.display = 'none';
                    }
                });

                // 显示或隐藏全选和删除按钮   
                if (selectAllButton.style.display === 'none') {
                    selectAllButton.style.display = 'inline-block';
                    deleteSelectedButton.style.display = 'inline-block';
                    DOMContentLoaded.style.display = 'inline-block';
                    divideClass.style.display = 'inline-block';

                } else {
                    selectAllButton.style.display = 'none';
                    deleteSelectedButton.style.display = 'none';
                    DOMContentLoaded.style.display = 'none';
                    divideClass.style.display = 'none';

                }
            });

            //全选
            document.getElementById('selectAllButton').addEventListener('click', function () {
                var checkboxes = document.querySelectorAll('.row-checkbox');
                checkboxes.forEach(function (checkbox) {
                    checkbox.checked = true;
                });
            });


            //删除选中的学生
            document.getElementById('deleteSelectedButton').addEventListener('click', function () {
                // 显示确认弹窗
                var confirmDelete = confirm('确认删除？');

                if (confirmDelete) {
                    // 用户点击了确认按钮
                    // 获取所有选中的复选框
                    var checkboxes = document.querySelectorAll('.row-checkbox:checked');

                    if (checkboxes.length === 0) {
                        // 如果没有选中的复选框，弹出提示
                        alert('请选择一个选项！');
                    } else {
                        // 否则，删除选中的行
                        checkboxes.forEach(function (checkbox) {
                            // 获取学号所在的单元格
                            const studentIdCell = checkbox.parentElement.nextElementSibling
                                .nextElementSibling;
                            const studentId = studentIdCell.textContent.trim(); // 获取学号并去除空格
                            studentInformation.deleteStudent(studentId); // 调用删除方法
                            checkbox.parentElement.parentElement.remove(); // 删除选中的行
                        });
                    }
                }
            });



            // 录入学生信息模态框
            // 获取模态框
            var addModal = document.getElementById("openAddModal");

            // 获取打开模态框的按钮
            var openAddModalBtn = document.getElementById("openModal");

            // 获取关闭模态框的<span>元素
            var closeAddModalSpan = document.getElementsByClassName("close")[0];

            // 当用户点击按钮时，打开模态框
            openAddModalBtn.onclick = function () {
                addModal.style.display = "block";
            }

            // 当用户点击<span> (x) 时，关闭模态框
            closeAddModalSpan.onclick = function () {
                addModal.style.display = "none";
            }

            // 处理表单提交
            document.getElementById("studentForm").addEventListener("submit", function (event) {
                event.preventDefault(); // 阻止表单默认提交行为

                // 获取表单数据
                var studentId = document.getElementById("studentId").value;
                var studentName = document.getElementById("studentName").value;
                var studentSex = document.getElementById("studentSex").value;
                var studentAge = document.getElementById("studentAge").value;
                var studentDate = document.getElementById("studentDate").value;
                var studentClass = document.getElementById("studentClass").value;
                var studentPhone = document.getElementById("studentPhone").value;
                var userId = document.getElementById("userId").value;

                // 构建学生对象
                var student = {
                    studentId: studentId,
                    studentName: studentName,
                    studentSex: studentSex,
                    studentDate: studentDate,
                    studentAge: studentAge,
                    studentClass: studentClass,
                    studentPhone: studentPhone,
                    userId: userId
                };

                // 调用Vue实例中的addStudent方法
                studentInformation.addStudent(student);

                // 关闭模态框
                addModal.style.display = "none";

                // 清空表单
                document.getElementById("studentForm").reset();
            });

            // 取消，关闭模态框
            function closeModel1() {
                var modal = document.getElementById("openAddModal");
                modal.style.display = "none";
            }


            // 修改
            document.addEventListener('DOMContentLoaded', function () {
                const checkboxes = document.querySelectorAll('.row-checkbox');
                const modifyButton = document.getElementById('DOMContentLoaded'); // 按钮ID

                modifyButton.addEventListener('click', function () {
                    const checkedCheckboxes = Array.from(checkboxes).filter(checkbox => checkbox
                        .checked);
                    if (checkedCheckboxes.length > 1) {
                        alert('只能选择一个选项！');
                    } else if (checkedCheckboxes.length === 1) {
                        // 处理单个选中的复选框
                        const checkbox = checkedCheckboxes[0];
                        const studentId = checkbox.parentElement.nextElementSibling.textContent; // 获取学号

                        // 从Vue实例中获取学生信息
                        const student = studentInformation.studentList.find(s => s.studentId ==
                            studentId);

                        if (student) {
                            // 填充模态框表单
                            document.getElementById("updateStudentId").value = student.studentId;
                            document.getElementById("updateStudentName").value = student.studentName;
                            document.getElementById("updateStudentSex").value = student.studentSex;
                            document.getElementById("updateStudentAge").value = student.studentAge;
                            document.getElementById("updateStudentDate").value = student.studentDate;
                            document.getElementById("updateStudentClass").value = student.studentClass;
                            document.getElementById("updateStudentPhone").value = student.studentPhone;
                            document.getElementById("updateUserId").value = student.userId;



                            // 显示模态框
                            var updateModal = document.getElementById("openUpdateModal");
                            updateModal.style.display = "block";
                        } else {
                            alert('未找到学生信息！');
                        }
                    } else {
                        alert('请选择一个选项！');
                    }
                });
            });




            // 修改学生信息模态框
            // 获取模态框元素
            var updateModal = document.getElementById("openUpdateModal");

            // 获取关闭模态框的<span>元素
            var closeUpdateModalSpan = document.getElementsByClassName("close")[1]; // 第二个关闭按钮

            // 当用户点击<span> (x), 关闭模态框
            closeUpdateModalSpan.onclick = function () {
                updateModal.style.display = "none";
            }

            // 获取表单元素
            var updateForm = document.getElementById("studentForm_update");

            // 表单提交事件处理
            updateForm.onsubmit = function (event) {
                event.preventDefault(); // 阻止表单默认提交行为

                // 获取表单数据
                var studentId = document.getElementById("updateStudentId").value;
                var studentName = document.getElementById("updateStudentName").value;
                var studentSex = document.getElementById("updateStudentSex").value;
                var studentAge = document.getElementById("updateStudentAge").value;
                var studentDate = document.getElementById("updateStudentDate").value;
                var studentClass = document.getElementById("updateStudentClass").value;
                var studentPhone = document.getElementById("updateStudentPhone").value;
                var userId = document.getElementById("updateUserId").value;

                // 构建学生对象
                var student = {
                    studentId: studentId,
                    studentName: studentName,
                    studentSex: studentSex,
                    studentDate: studentDate,
                    studentAge: studentAge,
                    studentClass: studentClass,
                    studentPhone: studentPhone,
                    userId: userId
                };

                // 这里可以添加处理表单数据的逻辑，比如发送到服务器
                console.log("学号: " + student.studentId);
                console.log("姓名: " + student.studentName);
                console.log("性别: " + student.studentSex);
                console.log("年龄: " + student.studentAge);
                console.log("出生日期: " + student.studentDate);
                console.log("班级: " + student.studentClass);
                console.log("电话: " + studentPhone);
                console.log("用户Id: " + student.userId);



                // 调用Vue实例中的updateStudent方法
                studentInformation.updateStudent(student);

                // 关闭模态框
                updateModal.style.display = "none";
            }

            // 取消，关闭模态框
            function closeModel2() {
                var modal = document.getElementById("openUpdateModal");
                modal.style.display = "none";
            }

            // 合并的window.onclick事件处理程序
            window.onclick = function (event) {
                if (event.target == addModal || event.target == updateModal) {
                    closeModal(event.target);
                }
            }

            
            // 显示分班确认框
            document.getElementById('divideClass').addEventListener('click', function () {
    var checkboxes = document.querySelectorAll('.row-checkbox:checked');
    if (checkboxes.length === 0) {
        alert('请选择一个选项！');
    } else {
        // 获取所有选中的复选框
        var studentsId = [];
        checkboxes.forEach(function(checkbox) {
            const studentId = checkbox.parentElement.nextElementSibling.textContent.trim(); // 获取学号并去除空格
            studentsId.push(studentId); // 将学号添加到studentsId数组中
        });

        // 使用 prompt 让用户选择班级
        var selectedClass = prompt('请输入班级名', studentInformation.student.studentClass);
        if (selectedClass !== null && selectedClass.trim() !== '') {
            // 打印调试信息
            console.log('studentsId:', studentsId);
            console.log('selectedClass:', selectedClass);

            // 使用 confirm 确认修改
            var confirmAssign = confirm('确认将学生分配到班级 ' + selectedClass + ' 吗？');
            if (confirmAssign) {
                // 构建 addStudentsToClassDTO 对象
                var addStudentsToClassDTO = {
                    studentsId: studentsId,
                    studentClass: selectedClass.trim()
                };

                // 调用 addStudentToClass 方法
                studentInformation.addStudentToClass(addStudentsToClassDTO);
            }
        } else {
            alert('请输入有效的班级名称！');
        }
    }
});

           


            /*         //分班
                      // 显示分班模态框
            document.getElementById('divideClass').addEventListener('click', function () {
                var checkboxes = document.querySelectorAll('.row-checkbox:checked');
                if (checkboxes.length === 0) {
                    alert('请选择一个选项！');
                } else if (checkboxes.length > 1) {
                    alert('只能选择一个选项！');
                } else {
                    // 显示模态框
                    $('#classModal').modal('show');
                }
            });

            // 处理分班模态框中的“确定”按钮点击事件
            document.getElementById('assignClassBtn').addEventListener('click', function () {
                var confirmAssign = confirm('确认修改？');
                if (confirmAssign) {
                    // 获取选中的复选框
                    var checkbox = document.querySelector('.row-checkbox:checked');
                    const studentId = checkbox.parentElement.nextElementSibling.textContent; // 获取学号

                    // 获取选择的班级
                    var selectedClass = document.getElementById('classSelect').value;

                    // 这里可以添加处理分班逻辑，比如发送到服务器
                    console.log("学号: " + studentId);
                    console.log("班级: " + selectedClass);

                    // 关闭模态框
                    $('#classModal').modal('hide');

                    // 刷新学生列表或其他操作
                    studentInformation.getStudentList(studentInformation.currentPage);
                }
            }); */
        </script>

    </div>


    </div>
    </div>

    <footer class="app-footer">
        <div class="wrapper">
            <span class="pull-right" style="text-align: center;">2.1 <a href="#"><i
                        class="fa fa-long-arrow-up"></i></a></span> © 2024-12-LUT-PRACTICE
        </div>
    </footer>

    <!-- Javascript Libs -->
    <script type="text/javascript" src="../../lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../lib/js/Chart.min.js"></script>
    <script type="text/javascript" src="../../lib/js/bootstrap-switch.min.js"></script>

    <script type="text/javascript" src="../../lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="../../lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../../lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="../../lib/js/select2.full.min.js"></script>
    <script type="text/javascript" src="../../lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="../../lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="../../lib/js/ace/theme-github.js"></script>
    <!-- Javascript -->
    <script type="text/javascript" src="../../js/app.js"></script>


</body>

</html>